<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>欢迎来到聊天室</title>
    <script type="application/javascript" src="/js/jquery-3.5.1.min.js"></script>
    <script type="application/javascript" src="/js/jquery.cookie.js"></script>
    <script type="application/javascript" src="/layui/layui.js"></script>
    <script type="application/javascript" src="/js/plugin.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css" tppabs="/layui/css/layui.css" media="all">
</head>

<body class="layui-layout-body">

    <div class="">
        <!-- 内容主体区域 -->
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <!-- 背景面板 -->
                <div class="layui-panel" style="height: 69vh;overflow-y:auto;">
                    <iframe src="record.html" frameborder="0" style="width: 100%; height: 90vh; border-radius: 2px;"></iframe>
                </div>
            </div>
        </div>

    </div>

    <!-- 底部固定区域 -->
    <div class="layui-footer">
        <form id="down" class="layui-form" style="height: 10vh;">
            <div class="layui-form-item" style="margin: 0px">
                <div class="layui-input-block" style="display:inline-block;margin-left: 10px;vertical-align:middle;">
                    <i class="layui-icon layui-icon-face-smile" style="font-size: 24px; color: #1E9FFF;"></i>
                </div>
                <div class="layui-input-block" style="display:inline-block;margin-left: 5px;vertical-align:middle;">
                    <button type="button" id="sendfile" class="layui-icon layui-icon-add-1"
                        style="font-size: 24px; color: #1E9FFF;"></button>
                </div>
                <div class="layui-input-block"
                    style="padding: 0px;display:inline-block;margin-left: 15px;vertical-align:middle;">
                    <button id="send" class="layui-btn layui-btn-sm" lay-submit lay-filter="submit">发送</button>
                </div>
            </div>
            <div class="layui-form-item layui-form-text" style="margin: 0px">
                <div class="layui-input-block" style="margin: 0px 10px;">
                    <textarea id="chat_context" name="chat_context" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
        </form>
    </div>
    <script th:inline="javascript">
        layui.use(['upload', 'element', 'layer'], function () {
            var $ = layui.jquery
                , upload = layui.upload
                , element = layui.element
                , layer = layui.layer;
            //指定允许上传的文件类型
            upload.render({
                elem: '#sendfile'
                , url: '/' //此处配置你自己的上传接口即可
                , accept: 'file' //普通文件
                , done: function (res) {
                }
            });

        });
        layui.use('form', function () {
            var form = layui.form;
            // 提交
            form.on('submit(submit)', function (data) {
                $.ajax({
                    type: "post",
                    url: "/chat/record/add",
                    contentType:"application/json",//发送的数据格式
                    dataType: "html",//接收的数据格式
                    data: JSON.stringify(data.field),
                    success:function (){
                        $("#chat_context").val("");
                    },
                    error:function () {
                        alert("发送失败！")
                    }
                })
                return false;
            })
        });
    </script>
</body>

</html>